<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<head>
    <link href="/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/wechat/menu/base.css" />
    <link rel="stylesheet" href="/css/wechat/menu/index.css" />
    <link rel="stylesheet" href="/css/wechat/menu/lib.css" />
    <link rel="stylesheet" href="/css/wechat/menu/media_dialog&emotion_editor&msg_tab&emoji&msg_sender&tooltip.css" />
    <link  th:href="@{/js/plugins/layui/css/layui.css}" rel="stylesheet">
    <script src="/js/plugins/layui/layui.js"></script>
    <style>
        body{
            background: #fff!important;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>选择图片 <small>选择自动回复图片</small></h5>
                        <div class="ibox-tools">
                        </div>
                    </div>
                    <div class="ibox-content">
                        <a class="fancybox" href="/images/p1.jpg" title="图片1">
                            <img alt="image" src="/images/p_big1.jpg" />
                        </a>
                        <a class="fancybox" href="/images/p2.jpg" title="图片2">
                            <img alt="image" src="/images/p_big2.jpg" />
                        </a>
                        <a class="fancybox" href="/images/p3.jpg" title="图片3">
                            <img alt="image" src="/images/p_big3.jpg" />
                        </a>
                    </div>
                    <div id="test1"></div>
                </div>
            </div>

        </div>
    </div>



    <script src="/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="/js/common/content.js?v=1.0.0"></script>

    <script src="/js/plugins/fancybox/jquery.fancybox.js"></script>
    <!-- <script src="/js/business/system/wxmenu/vue.js"></script> -->

    <script th:inline="javascript" type="text/javascript">
        var type = [[${type}]];//选择文件的类型
        var MyTable={
        	    searchForm:"searchForm",
        	    searchUrl:"/wxmaterial/list",
        		tableId:"lgTable",
        		table:null,
        		prefix:"/wxmaterial"
        	};
        	var total=0;
        	var offset=0;
        	var limit=12;
        	var laypage;
        	$(function() {
        		     reLoad();
        		     toPage();
        		     /* $('.fancybox').fancybox({
        	                openEffect: 'none',
        	                closeEffect: 'none',
        	                hideOnContentClick: true,
        	                cyclic:true,
        	                onStart:function(){
        	                	alert(22);
        	                }
        	            }); */
        	});

        	function reLoad() {
        		 var config={
        					url : MyTable.searchUrl,
        					data:{"offset":offset,"limit":limit,"type":type},
        					async :false
        			}
        			EasyAjax.post_json(config,function(r){
        				total=r.total;
        				appendStr(r.rows);
        			}); 
        	}

        	function toPage(){
        		  layui.use('laypage', function(){
        	    	  laypage = layui.laypage;
        	    	  //执行一个laypage实例
        	    	  layPage();
        	    	});
        	}

        	function layPage(){
        		laypage.render({
        		    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        		    ,count: total //数据总数，从服务端得到
        		    ,limit:limit
        		    ,jump: function(obj, first){
        		    	 if(!first){ //一定要加此判断，否则初始时会无限刷新
        		    		 offset=(obj.curr-1)*obj.limit;
        		    		 reLoad();//一定要把翻页的ajax请求放到这里，不然会请求两次。
        				 }
        		    	
        		     }
        		  });
        	}

        	function reloadByType(type){
        		 types=type
        		 total=0;
        		 offset=0;
        		 reLoad();//一定要把翻页的ajax请求放到这里，不然会请求两次。
        		 layPage();
        	}

        	function appendStr(rows){
        		var str="";
        		$(".ibox-content").empty();
        		$.each(rows,function(i,item){
        			str+='<a class="fancybox" >';
        			str+='<img  onclick="chooseOne(this)" alt="image" src="'+item.localUrl+'" style="height: 202px;" />';
                    str+='</a>';
        		})
        		$(".ibox-content").append(str);
        	}
        
        	function chooseOne(obj){
        		var src=$(obj).attr("src");
        		var dom=$(window.parent.document).find("#choose_image");
        		dom.attr("src",src)
        		var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
    			parent.layer.close(index);
        	}
        
    </script>
</body>

</html>
